<script>

  import {Post} from '../lib/net.js';
  import Info from '../model/info.js';
  import {GetAnnounceList, UpdateAnnounce, DeleteAnnounce} from '../api.js';

  import {onMount} from 'svelte';

  let list = [];

  let Text = new Info();

  onMount(refreshList);

  async function refreshList() {
    let ret = await Post(GetAnnounceList);
    console.log(ret)
    let _list = [];

    ret.forEach((item, index) => {
      // item.index=index
      _list.push(new Info(item.id, item.title, item.content, item.show_create_time, item.auth, item.link));

    })
    // for (let item of ret) {
    // }

    _list = _list.sort((a, b) => {
      return a.id < b.id
    });

    list = _list;

  }

  function setValue() {
    let id = this.getAttribute("data-id");
    let currect_item;
    for (let item of list) {
      if (item.id == id) {
        currect_item = item;
        break
      }
    }

    Text = new Info(currect_item.id, currect_item.title, currect_item.content, currect_item.create_date, currect_item.auth, currect_item.link);
  }

  async function submit() {
    await Post(UpdateAnnounce, Text);
    refreshList();
  }

  async function del() {
    let id = this.getAttribute("data-id");
    id = Number(id)
    if (confirm("确定要删除吗,删除后不可恢复")) {
      await Post(DeleteAnnounce, {id})
      refreshList()
    }
  }

  function addNew() {
    Text = new Info();
  }

</script>

<div class="container">
		<div class="columns">
				<div class="column is-5 leftNotice">
						<div class="addNotice">
								<a on:click={addNew} style="color: white">新增</a>
						</div>
						<ul class="leftList">
								{#each list as item}
								<li class="item" style={(item.id%2)==0?'background-color:#FAFAFA;':''}>
								<a class="ctsLeft" data-id={item.id}>
										{item.id}、{item.title}
								</a>
								<div class="ctsRight">
										<button
														data-id={item.id}
														class="button is-small is-link"
														on:click={setValue}>修改
										</button>
										<button
														data-id={item.id}
														class="button is-small is-danger"
														on:click={del}>删除
										</button>
								</div>
								</li>
								{/each}
						</ul>
				</div>
				<div class="column is-7 rightNotice">
						<input class="input margintop10"
									 type="text" placeholder="标题" bind:value={Text.title}>
						<input class="input margintop10 is-small"
									 type="text" placeholder="发布者，默认[系统公告]" bind:value={Text.auth}>

						<input class="input margintop10 is-small"
									 type="text" placeholder="跳转链接" bind:value={Text.link}>
						<textarea  class=" margintop10"
											 placeholder="请输入文字内容..." bind:value={Text.content}></textarea>
						<div class="content"></div>
						<div class="button is-link  padding10 rowCenter addNotice"
								 on:click={submit}>提交
						</div>
				</div>
		</div>
</div>

<style>
		.container {
				padding: 0px 20px;
				/*background: #fff;*/
		}

		ul {
				height: 80vh;
				overflow-y: auto;
		}

		.item {
				width: 98%;
				background: #fff;
				padding: 0px 1%;
				text-align: center;
				margin: 5px 0;
				display: flex;
				flex-direction: row;
				align-items: center;
		}

		textarea {
				resize: none;
				width: 80%;
				height: 50vh;
		}

		.leftNotice {
				width: 98%;
				margin: 20px 0;
				border-radius: 6px;
				background-color: #fff;
		}

		.rightNotice {
				width: 100%;
				margin: 20px 0;
				margin-left: 6px;
				border-radius: 6px;
				background-color: #fff;
		}

		.addNotice {
				width: 110px;
				background: rgba(49, 138, 253, 1);
				border-radius: 2px;
				padding: 6px 2px;
				text-align: center;
				color: #ffffff;
				font-size: 16px;
		}

		.leftList {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin-top: 20px;
		}

		.ctsLeft {
				width: 70%;
				display: flex;
				align-items: flex-start;
				color: #000000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 14px;
		}

		.ctsRight {
				width: 30%;
		}

		.margintop10 {
				width: 70%;
				margin-top: 20px;
				padding: 20px;
				border:2px solid #eeeeee;
				border-radius: 4px;
		}

		.padding10 {
				padding: 10px 20px;
		}
</style>
